---
id: info_label
title: InfoLabel
sidebar_label: InfoLabel
---

InfoLabel is a versatile component used to display information or warning messages in different contexts. It leverages the flexibility of TailwindCSS for styling, offering predefined color modes for quick customization.

## Usage

To use `InfoLabel`, import it into your component and specify the `children` to display inside it. Optionally, you can also set the `mode` prop to change the appearance based on the context (`info` or `warn`).

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic Info Label

A basic example showing how to use the InfoLabel component to display an informational message.

import InfoLabelBasicDemo from '../../samples/components/info_label/info_label_basic';
import InfoLabelBasicSource from '!!raw-loader!../../samples/components/info_label/info_label_basic';

<CodeSample>
    <InfoLabelBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{InfoLabelBasicSource}</CodeBlock>

## Warning Label

Illustrating how to use the InfoLabel component to display a warning message by setting the mode to `warn`.

import InfoLabelWarnDemo from '../../samples/components/info_label/info_label_warn';
import InfoLabelWarnSource from '!!raw-loader!../../samples/components/info_label/info_label_warn';

<CodeSample>
    <InfoLabelWarnDemo/>
</CodeSample>

<CodeBlock language="tsx">{InfoLabelWarnSource}</CodeBlock>
